<template>
  <div class="hm-photo-card">
    <div class="box">
      <div class="titleClass">
        <text class="title">{{ options.title }}</text>
        <image @tap="toDetail(options.titleUrl)" class="titleImg" :src="options.titleImg" />
      </div>
      <div class="row">
        <image class="img" :src="options.img.src" @tap="toDetail(options.img.url)"/>
        <image class="img1" :src="options.img1.src" @tap="toDetail(options.img1.url)"/>
        <image class="img2" :src="options.img2.src" @tap="toDetail(options.img2.url)"/>
      </div>
      <div class="second">
        <image class="img3" :src="options.img3.src" @tap="toDetail(options.img3.url)"/>
        <image class="img4" :src="options.img4.src" @tap="toDetail(options.img4.url)"/>
        <image class="img5" :src="options.img5.src" @tap="toDetail(options.img5.url)"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HmPhotoCard',
  props: {
    dataId: {
      type: String,
      default: 'hm-photo-card'
    },
    options: {
      type: Object,
      default: function() {
        return {
         
        };
      }
    }
  },
  data() {
    return {};
  },
  methods: {
	  toDetail (url) {
		uni.navigateTo({
			url: url
		});
	  }
  }
};
</script>
<style>
@import './index.response.css';
</style>
